<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="税源地" prop="taxOrganizationId">
<!--            @change="tslIdChange"-->
            <el-select v-model="form.taxOrganizationId" placeholder="请选择税源地" @change="taxChange">
              <el-option v-for="(item, index) in taxList" :key="item.organizationId" :label="item.companyName"
                         :value="item.organizationId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票类型" prop="invoiceType">
            <el-select v-model="form.invoiceType" placeholder="请选择开票类型">
              <el-option label="专票" :value="1" />
              <el-option label="普票" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开票类目" prop="invoiceCatagory">
            <el-select v-model="form.invoiceCatagory" filterable  placeholder="请选择开票类目">
              <el-option v-for="(item, index) in taxInvoiceList" :key="item.id" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model="form.taskName" placeholder="请输入任务名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型 " prop="type">
            <el-select v-model="form.type" placeholder="请选择任务类型" clearable style="width: 100%">
              <el-option label="分包" :value="1" />
              <el-option label="众包" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务金额" required>
            <el-row :gutter="0">
              <el-col :span="18">
                <el-form-item prop="money">
                  <el-input class="money" v-model="form.money" label="请输入金额">
                    <template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="unit">
                  <el-select v-model="form.unit" placeholder="请选择单位" clearable>
                    <el-option label="按单" value="按单" />
                    <el-option label="按次" value="按次" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所需人数" prop="staffNum">
            <el-popover placement="top-start" title="" width="200" trigger="hover" content="所需人数,为0不限制">
              <el-input-number slot="reference" class="staffNum" :controls="false" v-model="form.staffNum" :min="0"
                               :max="999999" label="请输入人数"></el-input-number>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startDate">
            <el-date-picker class="time" clearable v-model="form.startDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始时间"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="截止时间" prop="endDate">
            <el-date-picker class="time" clearable v-model="form.endDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择截止时间"> </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="任务标签" prop="taskTip">
        <el-select v-model="taskTip" multiple :multiple-limit="5" filterable allow-create @change="handleTaskTip"
                   style="width: 100%;" default-first-option placeholder="请选择任务标签（最多选五个） 输入后回车添加新条目">
          <el-option v-for="item in taskTipOption" :key="item.label" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="任务内容" prop="taskContent">
        <el-input v-model="form.taskContent" type="textarea" :autosize="{ minRows: 8, maxRows: 8 }" placeholder="例如：1.当天完成某某任务
2.辅助某某完成日常工作
3.执行领导下达的各项工作任务和工作指示等" />
      </el-form-item>
      <el-form-item label="任务要求" prop="taskRequire">
        <el-input v-model="form.taskRequire" type="textarea" :autosize="{ minRows: 8, maxRows: 8 }" placeholder="例如：1.当天完成某某任务
2.辅助某某完成日常工作
3.执行领导下达的各项工作任务和工作指示等" />
      </el-form-item>

    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">提 交</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </div>
</template>
<script>

import { getTask, addTask, updateTask } from "@/api/system/task"
import {listTaxMarket} from "@/api/tax/taxMarket";
import {listTaxInvoice} from "@/api/system/taxInvoice";

export default {
  name: "taskOperate",
  props:{
    taskNo:{
     type:String,
    },
  },
  data() {
    return{
      taxList:[],
      loading:false,
      taskTip: [],
      taxInvoiceList:[],
      form:{
        unit:null,
        type:null,
        money:0,
        taskNo:null,
        taskTip:null,
        endDate:null,
        staffNum:0,
        taskName:null,
        startDate:null,
        taskRequire:null,
        taskContent:null,
        invoiceType:null,
        invoiceCatagory:null,
        taxOrganizationId:null,
      },

      // 表单校验
      rules: {
        taxOrganizationId: [
          { required: true, message: "请选择税源地", trigger: ["blur", "change"] }
        ],
        taskName: [
          { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "请选择单位", trigger: ["blur", "change"] }
        ],
        type: [
          { required: true, message: "请选择任务类型", trigger: ["blur", "change"] }
        ],
        startDate: [
          { required: true, message: "请选择开始时间", trigger: ["blur", "change"] }
        ],
        endDate: [
          { required: true, message: "请选择截止时间", trigger: ["blur", "change"] }
        ],
        address: [
          { required: true, message: "详细地址不能为空", trigger: "blur" }
        ],
        auditStatus: [
          { required: true, message: "请选择审核状态", trigger: ["blur", "change"] }
        ],
        breakHours: [
          { required: true, message: "请选择工作時間", trigger: ["blur", "change"] }
        ],
        workingHours: [
          { required: true, message: "请选择休息時間", trigger: ["blur", "change"] }
        ],
        invoiceType: [
          { required: true, message: "请选择发票类型", trigger: ['blur', 'change'] }
        ],
        invoiceCatagory: [
          { required: true, message: "请选择开票类目", trigger: ['blur', 'change'] }
        ],
        money: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              // 验证是否为数字
              if (value && isNaN(Number(value))) {
                callback(new Error('请输入有效的金额'));
              }
              // 验证小数位数
              else if (value && value.toString().includes('.') && value.toString().split('.')[1].length > 2) {
                callback(new Error('最多保留两位小数'));
              }
              else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      },
      taskTipOption: [{
        label: '包吃包住'
      }, {
        label: '包吃'
      }, {
        label: '不限男女'
      }, {
        label: '男'
      }, {
        label: '女'
      }, {
        label: '加班补贴'
      }, {
        label: '夜班'
      }],
    }
  },
  mounted() {
    this.loading = true
    listTaxMarket({auditStatus:3,pageSize:1000}).then(response => {
      this.taxList = response.rows
      this.loading = false
    })
  },
  methods:{

    getDetail(){
      this.loading = true
      getTask(this.form.taskNo).then(response=>{
        this.loading = false
        this.form = response.data
        this.form = response.data;
        this.taxChange(this.form.taxOrganizationId)
        let taskTip = response.data.taskTip
        if (taskTip) {
          this.taskTip = taskTip.split(",")
        }
      }).catch(()=>{
        this.loading = false
      })
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.form.taskNo != null) {
            updateTask(this.form).then(response => {
              this.loading = false
              this.$modal.msgSuccess("修改成功")
              this.handleCancel(true)
            }).catch(()=>{
              this.loading = false
            })
          } else {
            addTask(this.form).then(response => {
              this.loading = false
              this.$modal.msgSuccess("新增成功")
              this.handleCancel(true)
            }).catch(()=>{
              this.loading = false
            })
          }
        }
      })
    },

    handleTaskTip(e) {
      // 定义一个正则表达式，用于匹配特殊符号
      const specialCharsRegex = /[^a-zA-Z0-9\u4e00-\u9fa5]/g;
      // 过滤数组，只保留不包含特殊符号的元素
      const filteredArray = e.filter(item => {
        return typeof item === 'string' && !specialCharsRegex.test(item);
      });
      this.taskTip = filteredArray
      // 将过滤后的数组元素用逗号连接成一个字符串，并赋值给 this.form.taskTip
      this.form.taskTip = filteredArray.join(",");
    },

    handleCancel(val){
      this.$emit("cancel",val)
    },

    taxChange(val){
      this.loading = true
      listTaxInvoice({organizationId:val,pageSize:1000}).then(response => {
        this.taxInvoiceList = response.rows
        this.loading = false
      })
    }

  },
  watch:{
    taskNo:{
      handler(val){
        if (val){
          this.form.taskNo = val
          this.getDetail()
        }
      },
      immediate:true
    }
  }
}
</script>
<style scoped lang="scss">
  ::v-deep .el-col{
    .el-form-item{
      width: 100%;
      .el-date-editor{
        width: 100%;
      }
    }
  }
  .line{
    text-align: center;
  }


</style>
